<template>
<div class="info">
    <div v-for="(item,index) in list" :key='index'>
        <div class="l">
            {{item.key}}
        </div>
        <div class="r">
            {{item.val}}&nbsp;&nbsp;&nbsp;<a :href="item.href" target="_blank">{{item.link}}</a>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            list: [{
                    key: '当前版本',
                    val: 'V1.0.1',
                    link: '查看新版本',
                    href: 'http://www.highset.cn',
                },
                {
                    key: '用户名',
                    val: 'highset',
                },
                {
                    key: '上次登录时间',
                    val: '2020-11-19 11:49:50',
                },
                {
                    key: '上次登录ip',
                    val: 'highset',
                },
                {
                    key: '本次登录时间',
                    val: 'highset',
                },
                {
                    key: '登录次数',
                    val: '3233',
                },
            ]
        }
    }
}
</script>

<style lang="less" scoped>
// 您的资料
.info {
    background-color: #fff;
    padding: 10px;
    margin-top: 20px;

    .t {
        font-size: 18px;
        margin-bottom: 20px;
    }

    >div {
        display: flex;
        height: 40px;
        line-height: 40px;
        border-top: 1px solid #f1f2f3;

        .l,
        .r {
            display: flex;
            align-items: center;
        }

        .l {
            margin-right: 10px;
            flex: 0 0 30%;
            justify-content: center;
        }

        .r {
            padding: 10px;
        }
    }

}
</style>
